<template>
  <ContentWrap title="解散单/部门">
    <Form
      :schema="schema"
      @register="formRegister"
      label-width="150px"
      :isCol="false"
      :rules="rules"
    />
    <div style="text-align: center">
      <BaseButton type="primary" @click="save">查询受影响的部门员工</BaseButton>
    </div>
    <disbandedDept v-if="isLoad" :dept-id="deptId" @complete="reset" />
  </ContentWrap>
</template>

<script>
import { Form } from '@/components/Form'
import { useForm } from '@/hooks/web/useForm'
import disbandedDept from './components/disbandedDept.vue'
const { formRegister, formMethods } = useForm()
export default {
  components: {
    Form,
    disbandedDept
  },
  data() {
    return {
      isLoad: false,
      deptId: null,
      schema: [
        {
          field: 'DeptId',
          label: '解散的单位/部门',
          component: 'DeptSelect',
          componentProps: {
            isChioseUnit: true,
            placeholder: '选择解散的单位/部门'
          }
        }
      ],
      rules: {
        DeptId: [
          {
            required: true,
            message: '请选择解散的单位/部门！',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    formRegister,
    reset() {
      this.isLoad = false
      this.deptId = null
      formMethods.setValues({
        DeptId: null
      })
    },
    async save() {
      const data = await formMethods.validate()
      if (data == null) {
        return
      }
      this.deptId = data.DeptId
      this.isLoad = true
    }
  }
}
</script>
